<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>疫情物资捐助管理员</title>
    <script src="/js/mui.min.js"></script>
    <link rel="stylesheet" href="/css/sanzhangtu.css"/>
    <link href="/css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <script src="/js/jquery.js"></script>
    <script src="/js/Vue.js"></script>
    <!--	<script src="/js/bd.js"></script>-->
</head>
<style type="text/css">
    .clearfix {
        clear: both;
    }

    .mui-title {
        color: white;
    }



    .zhanwei {
        width: 100%;
        height: 44px;
    }

    .bgt {
        background: #333333;
    }

    .xx_date {
        /*background: #CCCCCC;*/
        width: 90%;
        text-align: center;
        margin: 10px auto;
        color: #d1cdcd;
    }

    .xx_list {
        background: white;
        width: 90%;
        margin: 5px auto;
        padding: 15px;
    }

    .xx_li_neir {
        font-size: 16px;
        color: #505050;
        height: auto;

    }

    .xx_li_ti {
        font-size: 18px;
        color: #000;
    }
    .newz{
        /*color:#000000;*/
        font-weight: bold;
        letter-spacing: 5px;
    }
    .mui-bar{
        background: #ec3131;
    }
    .diqu{
        margin-top: 30px !important;
        text-align: center
    }
    .diqu p{
        font-size:16px;
        letter-spacing: 3px;
    }
    .mui-title{
        font-size: 20px;
        margin-top: -6px !important;

    }
    /*时钟日期进入动画*/
    /*.sj{*/
    /*	animation:jb 1.5s;*/
    /*}*/
    /*@keyframes jb{*/
    /*	from{opacity:0}*/
    /*	to{opacity:1}*/
    /*}*/
    /*时钟:动画*/
    .s_s{
        animation:shanshuo 1s ;
        animation-iteration-count:infinite;
    }
    @keyframes shanshuo
    {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    .sj{
        /*display: none;*/
        color: #fff;
        font-size: 13px;
        margin-left: 31%;
        margin-top: 7.3%;
        /*font-family: monospace;*/
        /*font-weight: bold;*/
        opacity: 0;
    }
    .sj span{
        margin-left:-3px;
    }
    .fff{
        margin-right:-6px !important;
    }
    .qt{
        margin-top: 10px;
    }
    .qt p{
        color:red;
    }
    .zjj{
        text-align: center;
        color:#000000;
        background: #fff;
        padding: 10px 0px 10px 0px;
        margin: 0px 20px 0px 20px;
    }
    .zjj p{
        color:#505050;
        letter-spacing: 3px;
    }
    .newimg{
        width: 100%;
        margin-top: 40px;
    }
    .mui-badge{
        background:yellow !important;
        color: red !important;
    }
    .newdd{
        color:#fff !important;
        border-left:solid 1px #fff ;
    }
</style>
<body>
<div id="app" v-clock="">
    <header class="my-bar mui-bar mui-bar-nav">
        <!--		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
        <h1 class="mui-title newz">疫情物资捐助管理系统
        </h1>
        <div class="sj">
            <span class="fff" id="yer"></span>
            年
            <span class="fff" id="my"></span>
            月
            <span class="fff" id="t"></span>
            日&nbsp;
            <span id="hhh"></span>
            <span class="s_s">:</span>
            <span id="mmm"></span>
            <span class="s_s">:</span>
            <span id="sss"></span>
        </div>
        <!--		<a href="/home/locate" class="mui-btn mui-btn-danger mui-pull-right dingwei">-->
        <!--			<span class="mui-icon mui-icon-location"></span></a>-->
    </header>

<!--    <img class="newimg" src="/images/logoo.jpg" />-->
    <div style="height:20px"></div>
    <div class="diqu zjj">
        <p style="color:#000">当前管理员：
            {{name}}</p>

    </div>
    <div class="diqu qt">
        <p>-共计审核通过{{shtg()}}次，撤销{{chexiao()}}次-</p>

    </div>

    <div class="diqu">
        <p>捐助名单</p>

    </div>

    <!--消息体显示结构-->

    <!--捐款目录表-->
    <div v-for="(item,k) in list" :key="k" class="xx_list">
        <p class="xx_date">{{sj_nyrhms(item.k_time)}}</p>
        <!--({{i.region_name}})-->
        <p v-if="item.style==0" class="xx_li_ti">{{item.name}},捐助资金:</p>
        <p v-if="item.style==1" class="xx_li_ti">{{item.name}},捐助物品:</p>
        <p v-if="item.style==2" class="xx_li_ti">{{item.name}},捐助资金和物品:</p>
        <!--尊敬的 &lt;One上大街&gt;用户您好：-->
        <textarea v-if="item.style==0" class="xx_li_neir" readonly
                  style="overflow:hidden; resize:none;">
            {{item.danjia}}元
         </textarea>
        <textarea v-if="item.style==1" class="xx_li_neir" readonly
                  style="overflow:hidden; resize:none;">{{item.text}}
         </textarea>
        <textarea v-if="item.style==2" class="xx_li_neir" readonly
                  style="overflow:hidden; resize:none;">物品：{{item.text}}
		资金：{{item.danjia}}元
		</textarea>
        <div style="text-align:center;">
            <button v-if="item.str==3" type="button" class="mui-btn-red mui-btn-outlined"><span class="mui-icon mui-icon-closeempty"></span>已撤销</button>
            <button v-if="item.str==2" type="button" class="mui-btn-green mui-btn-outlined"><span class="mui-icon mui-icon-checkmarkempty"></span>已通过</button>
            <button @click="cz_tongguo(item.Id)" v-if="item.str==1" type="button" class="mui-btn-green"><span class="mui-icon mui-icon-checkmarkempty"></span>通过</button>
            <button @click="cz_chexiao(item.Id)" v-if="item.str==1" type="button" class="mui-btn-red"><span class="mui-icon mui-icon-closeempty"></span>撤销</button>
        </div>
    </div>

    <!--	底部顶出技术支持信息-->
    <div style="height:110px;text-align:center;">
        <P>技术支持：©廊坊市鸿星志金网络科技有限公司®</P>
        <a href="http://WWW.5Q88.CN"><P>WWW.5Q88.CN</P></a>
    </div>
    <!--底部导航栏-->
    <nav class="mui-bar mui-bar-tab">
        <a id="defaultTab" @click="sx_sh()" class="newdd mui-tab-item mui-active" href="javascript:void(0)">
            <span class="mui-icon mui-icon-flag"></span>
            <span class="mui-tab-label"><span class="mui-badge">{{dsh()}}</span>待审核</span>
        </a>
        <a @click="sx_ytg()" class="newdd mui-tab-item" href="javascript:void(0)">
            <span class="mui-icon mui-icon-checkmarkempty"></span>
            <span class="mui-tab-label">已通过</span>
        </a>
        <a @click="sx_ycx()" class="newdd mui-tab-item" href="javascript:void(0)">
            <span class="mui-icon mui-icon-closeempty"></span>
            <span class="mui-tab-label">已撤销</span>
        </a>
        <a @click="fanhui()" class="newdd mui-tab-item" >
            <span class="mui-icon mui-icon-back"></span>
            <span class="mui-tab-label">返回</span>
        </a>
    </nav>
</div>
</body>
</html>
<script>
    var app=new Vue({
        el: "#app",
        data: {
            bf:{$list},
            list:{$list},
            name:{$qy_name},
            zjsum:{$zjsum},
            wzsum:{$wzsum},
            qy_id:{$qy_id}
        },
        methods: {

            ///返回首页
            fanhui:function(){
                var t=this;
                location.href='/?qy_id='+t.qy_id;
            },
            ///筛选审核中的数据
            sx_sh:function(){
                var t=this;
                t.list=[];
                for(var i=0;i<t.bf.length;i++){
                    if(t.bf[i].str==1){
                        t.list.push(t.bf[i])
                    }
                }
            },
            ///筛选已撤销的数据
            sx_ycx:function(){
                var t=this;
                t.list=[];
                for(var i=0;i<t.bf.length;i++){
                    if(t.bf[i].str==3){
                        t.list.push(t.bf[i])
                    }
                }
            },
            ///筛选已经通过的数据
            sx_ytg:function(){
                var t=this;
                t.list=[];
                for(var i=0;i<t.bf.length;i++){
                    if(t.bf[i].str==2){
                        t.list.push(t.bf[i])
                    }
                }
            },
            ///提交撤销审核
            cz_chexiao:function(wz_id){
                var data={
                    'cood':'d_wzcx',
                    'wz_id':wz_id
                }
                $.post('admin/index/wzcz',data,function(e){
                    mui.alert(e.msg,function(){
                        location.reload();
                    });
                },'json')
            },
            ///提交通过审核
            cz_tongguo:function(wz_id){
                var data={
                    'cood':'d_wztg',
                    'wz_id':wz_id
                }
                $.post('admin/index/wzcz',data,function(e){
                    mui.alert(e.msg,function(){
                        location.reload();
                    });
                },'json')
            },
            ///撤销数量
            chexiao:function(){
                var t=this;
                var a=0;
                if(t.bf!=null) {
                    for (var i = 0; i < t.bf.length; i++) {
                        if (t.bf[i].str == 3) {
                            a += 1;
                        }
                    }
                }
                return a;
            },
            ////审核通过数
            shtg:function(){
                var t=this;
                var a=0;
                if(t.bf!=null){
                    for(var i=0;i<t.bf.length;i++){
                        if(t.bf[i].str==2){
                            a+=1;
                        }
                    }
                }

                return a;
            },
            ////等待审核数
            dsh:function(){
                var t=this;
                var a=0;
                if(t.bf!=null) {
                    for (var i = 0; i < t.bf.length; i++) {
                        if (t.bf[i].str == 1) {
                            a += 1;
                        }
                    }
                }
                return a;
            },
            autoTextAreaHeight: function () {
                var o = this.target;
                o.style.height = o.scrollTop + o.scrollHeight + "px";
            },
            // 时间转换
            sj_nyrhms:function(sjc){
                var d=new Date();
                d.setTime(sjc * 1000);
                var h=d.getHours();//小时0-23
                var m=d.getMinutes();//分钟0-59
                var y=d.getFullYear();//年
                var my=d.getMonth()+1;//月
                var t=d.getDate();//日
                var s=d.getSeconds()//秒
                if(h<10){
                    h="0"+h;
                }
                if(m<10){
                    m="0"+m;
                }
                var ttt=y+'-'+my+'-'+t+' '+h+':'+m;
                return ttt;
            }
        },
        mounted: function () {
            // $.each($("textarea"), function (i, n) {
            // 	$(n).css("height", n.scrollHeight + "px");
            // 	// alert(n.scrollHeight)
            // });

            ///时钟显示
            function sz_xs(){
                var d=new Date();

                var h=d.getHours();//小时0-23
                var m=d.getMinutes();//分钟0-59
                var y=d.getFullYear();//年
                var my=d.getMonth()+1;//月
                var t=d.getDate();//日
                var s=d.getSeconds()//秒
                if(h<10){
                    h="0"+h;
                }
                if(m<10){
                    m="0"+m;
                }
                var ss=document.getElementById('sss');
                var tt=document.getElementById('t');
                var mmy=document.getElementById('my');
                var yer=document.getElementById('yer');
                var hh=document.getElementById('hhh');
                var mm=document.getElementById('mmm');
                ss.innerText=s;
                tt.innerText=t;
                mmy.innerText=my;
                yer.innerText=y;
                hh.innerText=h;
                mm.innerText=m;
                // console.log('a');
                $('.sj').css('opacity',1);
            }
            setInterval(sz_xs,1000);
        }


    });
</script>
